<template>
  <div class="search">
    <NavBar></NavBar>
    <div class="word m-b-10">
      <div>
        搜索关键词：<span>{{ keyword }}</span>
      </div>
    </div>
    <div class="content">
      <div class="article">
        <template v-if="articles !== ''">
          <div v-for="item in articles" :key="item.id" class="items">
            <div class="item" @click="toDetails(item.id)">
              <div class="title">{{ item.title }}</div>
              <div class="main">{{ item.markdownContent }}</div>
              <div class="footer">
                <span>
                  <img
                    style="width: 1em"
                    :src="item.avatar"
                    alt="云客栈"
                  />&nbsp;{{ item.nickname }}
                </span>
                <span class="time">
                  <el-icon><Clock /></el-icon> {{ item.createAt }}
                </span>
                <span class="view"
                  ><el-icon><View /></el-icon> {{ item.views }}</span
                >
                <span class="like"
                  ><el-icon><Star /></el-icon>{{ item.approvals }}</span
                >
                <span class="comments"
                  ><el-icon><ChatRound /></el-icon>{{ item.comments }}
                </span>
                <span class="tags"
                  ><ul>
                    <li v-for="o in item.tags" :key="o.id">
                      <el-icon><PriceTag /></el-icon>{{ o.name }}&nbsp;
                    </li>
                  </ul></span
                >
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="empty m-t-10">
            <div>空空如也~</div>
          </div>
        </template>
      </div>

      <el-divider />

      <div class="page">
        <el-pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total="totalNum"
          :page-sizes="[1, 2, 5, 10, 20, 30, 40, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
          layout="prev, pager, next"
        />
      </div>
    </div>
  </div>
</template>
  
  <script>
import NavBar from "@/components/NavBar.vue";
import { $getSearchArticles } from "../api/search";
export default {
  data() {
    return {
      keyword: "空",

      pageSize: 5,
      currentPage: 1,
      totalNum: 100,
      articles: [],
      catagory: "ARTICLE",
    };
  },
  mounted() {
    this.handleCurrentChange(1);
  },
  methods: {
    toDetails(id, category) {
      this.$router.push({
        path: "/detail",
        query: { category: category, id: id },
      });
    },
    async handleCurrentChange(id) {
      // val: number
      console.log(`current page: ${id}`);
      this.keyword = this.$route.query.keyword;

      let { data } = await $getSearchArticles({
        page: id,
        pageSize: this.pageSize,
        searchField: this.keyword,
      });
      this.articles = data.records;
      this.currentPage = id;
      this.totalNum = data.total;
    },
  },
  components: {
    NavBar,
  },
};
</script>
  

<style lang="less" scoped>
.search {
  background-color: #f3f3f2;
  height: 100vh;
  .word {
    margin-top: 20px;
    font-size: 20px;
  }
  .content {
    width: 1200px;

    margin: 0 auto;
    background: #fff;
    .article {
      .item {
        padding: 10px 25px;
        text-align: left;
        .title {
          font-size: large;
          font-weight: bolder;
        }
        .main {
          margin-top: 8px;
          font-size: smaller;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //行数
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .footer {
          margin-top: 8px;
          font-size: smaller;
          color: #b7b5b5;
          span:nth-child(n + 2) {
            margin-left: 35px;
          }
          .tags {
            ul {
              list-style: none;
              margin: 0;
              padding: 0;
              display: inline;
              li {
                display: inline;
              }
            }
          }
        }
      }
      .empty {
        font-size: 20px;
        p {
          margin-top: 20px;
        }
      }
    }
    .page {
      padding: 10px;
    }
  }
}
</style>
<style>
.search:after {
  content: "";
  display: block;
  clear: both;
}
.m-t-10 {
  margin-top: 10px;
}
.m-b-10 {
  margin-bottom: 10px;
}
.t-a-l {
  text-align: left;
}
.fw-b {
  font-weight: bold;
}
</style>
  